<template>
  <div class="about" style="margin-bottom: 30px;">
    <div style="width: 60%;margin:0 auto;">
      <h2>留言板</h2>
      <el-form :model="text" style="display: contents;">
        <!-- 输入表单 -->
        <el-form-item prop="textarea">
          <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" style="font-size: 20px;" placeholder="请输入内容"
            v-model="text.textarea">
          </el-input>
        </el-form-item>
        <!-- 点击后提交 -->
        <el-button type="primary" @click="submitForm" style="float: right;">评论</el-button>
      </el-form>


      <!-- 展示留言 -->
      <h2 style="margin-top: 50px;clear: both;">全部留言</h2>
      <el-card v-for="(comment, id) in comments" :key="id" class="box-card"
        style="margin-top:20px;background-color: #eaedf6;">
        <div class="text item">
          <span>
            <img :src="userImg + comment.user.userImg" width="50px" height="50px" alt=""
              style="border-radius: 50%;border: 1px solid;" />
          </span>
          <span style="position: relative; top: -55px;left: 65px;">
            <p style="margin:0;padding: 0;">{{ comment.user.nickname }}</p>
          </span>
          <br /><br />
          <p style="width: 85%;margin: -80px auto;">
            {{ comment.content }}
          </p>

          <br /><br /><br /><br /><br />
          <span style="float: right;">{{ comment.time | formatDateTime }}</span><br />
        </div>
      </el-card>
      <!-- 分页组件 -->
    <el-pagination style="margin-top: 10px;margin-left: 22%;" @current-change="handlePageChange" :current-page="currentPage"
            :page-size="pageSize" :total="total" layout="total,prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>
  
<script>
import commentApi from '@/api/commentApi'
import dataApi from '@/api/dataApi';
export default {
  name: "SortView",
  data() {
    return {
      // 表单数据
      text: {
        textarea: "",
      },
      //所有评论
      comments: [],
      userImg: "/api/getImg/",
      tableData: [], //存储从后端获取的数据
      currentPage: 1, // 当前页码
      pageSize: 7,   // 每页显示的数据量
      total: 0,        // 总数据量
    }
  },
  //设置标题
  created() {
    this.setPageTitle();
  },
  methods: {
    setPageTitle() {
      document.title = this.$route.meta.title || "My App";
    },
    getData() {
      // commentApi.getComment().then(response => {
      //   this.comments = response.data;
      // })
      dataApi.commentData({
        params: {
          page: this.currentPage - 1,
          size: this.pageSize,
        }
      }).then(response=>{
        this.comments = response.content;
        this.total = response.totalElements;
      })
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.getData(); // 切换页码时重新获取数据
    },
    //点击评论后执行
    submitForm() {
      if (this.text.textarea === "" || this.text.textarea ===" ") {
        this.$message({
          message: '警告，不能提交空消息',
          type: 'warning'
        });
      } else {
        commentApi.saveComment(this.text).then(response => {
          this.$message({
            message: '评论成功',
            type: 'success'
          });
          this.text.textarea = "";
          this.getData();
        })
      }

    },
  },
  mounted() {
    this.getData();
  },
  filters: {
    formatDateTime(value) {
      const date = new Date(value);
      const formattedDate = date.toLocaleString('US-en', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
      return formattedDate.replace(',');
    }
  }
};
</script>